<template>

	<u-card :title="title" full="true">
		<view class="" slot="body">
			<view v-for="item in dataList" :key="item.id">
				<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
					<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
					 mode="aspectFill"></image>
					<view class="s-item">{{item.stuname}}</view>
					<view class="uni-padding-wrap uni-common-mt">
						<view class="progress-box">
							<view class="s-item">
								<progress :percent="item.score" stroke-width="3">{{item.score}}分</progress>
							</view>
						</view>
					</view>


				</view>
			</view>

		</view>
	</u-card>

</template>
<view v-for="item in dataList" :key="item.id">
	<text class="s-item">{{item.score}}</text>
</view>
<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				title: '作业成绩',
				dataList: [],
			}

		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				const data = {
					status: 1
				}

				let list = await this.$myRequest({
					url: 'api/getstuwork',
					method: 'POST',
					data: data
				})

				this.dataList = list.data;
				console.log(list.data);

			}
		}
	}
</script>

<style>
	.course_head {
		float: left;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	progress {
		width: 100px;
		float: right;
	}
</style>
